<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Computer Graphics</title>
<style>
body {
  padding: 0;
  margin: 0;
  background: #eee;
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
canvas {
  background: black;
}
.btn-group {
  height: 43px;
}
.btn-group > a {
  text-decoration: none;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;
  margin: 5px;
  color: #444;
}
.btn-group > a:target {
  color: #29f;
  border-color: #29f;
}
</style>
</head>
<body>
<button onclick="toggleRecord(this)">录制</button>
<div class="btn-group"></div>
<canvas id="canvas" width="550" height="400"></canvas>

<script src="vector.js"></script>
<script src="color.js"></script>
<script src="shade.js"></script>
<script src="transform.js"></script>
<script src="bezier.js"></script>
<script src="canvas.js"></script>
<script src="scene.js"></script>

<script>
const frag = document.createDocumentFragment()
const btnGroup = document.querySelector('.btn-group')
for (let i = 1; i <= sceneCount; ++i) {
  const btn = document.createElement('a')
  const id = i.toString().padStart(2, '0')
  btn.id = btn.textContent = id
  btn.href = '#' + id
  frag.appendChild(btn)
}
btnGroup.appendChild(frag)
window.onhashchange = playScene
playScene()

function toggleRecord (btn) {
  btn.innerText = canvas.toggleRecord() ? '停止' : '录制'
}
</script>
</body>
</html>
